<template>
    <div class="rightFour">
        <ThemeTitlenew :title="title" />
        <div class="gardensInfo">
            <div class="gardens">
                <span>重点产业园区：</span>
                <span>{{ cyyNum }}个</span>
            </div>
            <!-- <el-select  v-model="state1" placeholder="请选择产业园">
                <el-option
                   v-for="item in options"
                   :key="item.name"
                   :label="item.name"
                   :value="item.name">
                </el-option>
            </el-select> -->
            <el-select
                class="inputRight1"
                v-model="state1"
                placeholder="请选择产业园"
                @change="cyyHandleClick()"
            >
                <el-option
                    v-for="item in options"
                    :key="item.name"
                    :label="item.namer"
                    :value="item.name"
                >
                </el-option>
            </el-select>
        </div>
        <div id="gardenChart"></div>
    </div>
</template>

<script>
import ThemeTitlenew from "../../common/ThemeTitlenew";
import { onMounted, ref, provide, onBeforeUnmount } from "vue";
import echarts from "echarts";
import { useStore } from "vuex";
export default {
    components: {
        ThemeTitlenew,
    },
    setup() {
        const title = provide("title", "产业分布");
        const store = useStore();
        const state1 = ref(" ");
        let myChart = null;
        let myChart2 = null;
        let options = [
            {
                name: "洋浦三友工业园",
                address:
                    "儋州市嘉洋路与吉浦路交叉路口西南侧(中国石化北侧约250米)",
                points: [109.216695, 19.749411],
            },
            {
                name: "江东电子商务产业园",
                address: "海口市美兰区琼山大道86号",
                points: [110.408588, 20.031981],
            },

            {
                name: "海口市新华信息产业孵化园(新华南路)",
                address: "海南省海口市龙华区新华南路5号",
                points: [110.350538, 20.043916],
            },
            {
                name: "海口文化产业园",
                address: "海口市龙华区复兴城c栋",
                points: [110.325319, 20.044848],
            },

            {
                name: "罗牛山产业园",
                address: "灵山镇桂林洋经济开发区桂林洋大道",
                points: [110.467915, 19.994793],
            },
            {
                name: "海口国家高新区美安产业孵化园",
                address: "海口市秀英区美安三街与安岭一路交叉路口往西南约50米",
                points: [110.185058, 19.919864],
            },

            {
                name: "云龙产业园",
                address: "海口市琼山区云龙镇云龙水利桥东侧",
                points: [110.465024, 19.896106],
            },

            {
                name: "道空间数字创意产业园",
                address:
                    "海口市琼山区中山南路与迈瀛路交叉路口往南约200米(政协小区北侧约100米)",
                points: [110.368185, 19.986952],
            },

            {
                name: "江东电商产业园",
                address: "海口市美兰区琼山大道(琥珀悠澜)",
                points: [110.408146, 20.031566],
            },
            {
                name: "海南万绿椰园生态产业联盟",
                address: "海南省海口市美兰区五指山路18号康业西湖苑G座1楼",
                points: [110.357139, 20.031617],
            },
            {
                name: "海南符氏食品产业园",
                address: "火炬路与224国道交叉口南150米",
                points: [110.269309, 19.943877],
            },
        ];
        let cyyData = [
            { name: "海口市", value: "52" },
            { name: "三亚市", value: "34" },
            { name: "陵水黎族自治县", value: "7" },
            { name: "琼中黎族苗族自治县", value: "4" },
            { name: "琼海市", value: "5" },
            { name: "澄迈县", value: "7" },
            { name: "白沙黎族自治县", value: "3" },
            { name: "文昌市", value: "3" },
            { name: "儋州市", value: "3" },
            { name: "乐东黎族自治县", value: "2" },
            { name: "定安县", value: "2" },
            { name: "临高县", value: "2" },
            { name: "东方市", value: "1" },
        ];
        let cyyNum = ref(0);
        cyyNum.value = cyyData.reduce(function (sum, number) {
            //sum2 前两个数的和
            return sum + parseInt(number.value);
        }, 0);
        function drawChart() {
            let xData = cyyData.map((item) => {
                return item.name;
            });
            let yData = cyyData.map((item) => {
                return item.value;
            });

            var dom = document.getElementById("gardenChart");
            myChart = echarts.init(dom);
            let option = {
                animation: true,
                grid: {
                    top: "20%",
                    bottom: "35%", //也可设置left和right设置距离来控制图表的大小
                    right: "5%",
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        label: {
                            show: true,
                        },
                    },
                },
                xAxis: {
                    data: xData,
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: "#fff",
                        },
                    },
                    axisTick: {
                        show: false, //隐藏X轴刻度
                    },
                    axisLabel: {
                        show: true,
                        fontSize: 10,
                        color: "#fff", //X轴文字颜色
                        rotate: 40,
                    },
                },
                yAxis: [
                    {
                        type: "value",
                        name: "个",
                        nameTextStyle: {
                            color: "#fff",
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#FFFFFF",
                            },
                        },
                        axisLabel: {
                            show: true,

                            color: "#fff",
                        },
                    },
                    {
                        type: "value",
                        name: "同比",
                        nameTextStyle: {
                            color: "#ebf8ac",
                        },
                        show: false,
                        position: "right",
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            formatter: "{value} %", //右侧Y轴文字显示

                            color: "#ebf8ac",
                        },
                    },
                    {
                        type: "value",
                        gridIndex: 0,
                        min: 50,
                        max: 100,
                        splitNumber: 8,
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: [
                                    "rgba(250,250,250,0.0)",
                                    "rgba(250,250,250,0.05)",
                                ],
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: " ",
                        type: "line",
                        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                        smooth: true, //平滑曲线显示
                        showAllSymbol: true, //显示所有图形。
                        symbol: "circle", //标记的图形为实心圆
                        symbolSize: 0, //标记的大小
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#058cff",
                        },
                        lineStyle: {
                            color: "#058cff",
                        },
                        areaStyle: {
                            color: "rgba(5,140,255, 0.2)",
                        },
                        data: yData,
                    },
                    {
                        name: "",
                        type: "bar",
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,244,255,1)",
                                // echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: 'rgba(0,244,255,1)' // 0% 处的颜色
                                // }, {
                                //     offset: 1,
                                //     color: 'rgba(0,77,167,1)' // 100% 处的颜色
                                // }], false),
                            },
                            borderRadius: [30, 30, 30, 30],
                        },
                        data: yData,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
        function initEcharts(){
              let xData = cyyData.map((item) => {
                return item.name;
            });
            let yData = cyyData.map((item) => {
                return item.value;
            });
            var dom = document.getElementById("gardenChart");
            myChart = echarts.init(dom);
          let  option = {
    // backgroundColor: '#00265f',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        top: '5%',
        right: '3%',
        left: '10%',
        bottom: '34%'
    },
    xAxis: [{
        type: 'category',
        data: xData,
        axisLine: {
            lineStyle: {
                color: '#FFFFFF'
            }
        },
        axisLabel: {
            color: '#e2e9ff',
               show: true,
               fontSize: 10,
               color: "#fff", //X轴文字颜色
               rotate: 40,
        },
        axisTick: {
            show: false
        }
    }],
    yAxis: [{
        max : 55,
        min : 0,
        splitNumber : 4,
        axisLabel: {
            formatter: '{value}',
            color: '#e2e9ff',
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: 'rgba(0,186,255,.6)'
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.12)'
            }
        }
    }],
    series: [{
        type: 'bar',
        data: yData,
        barWidth: '16px',
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,244,255,1)' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: 'rgba(0,77,167,1)' // 100% 处的颜色
                }], false),
                barBorderRadius:[ 30,30,30,30],
                shadowColor: 'rgba(0,160,221,1)',
                shadowBlur: 4,
            }
        },
        label: {
            normal: {
                show: false,
                lineHeight: 30,
                formatter: '{c}',
                position: 'top',
                textStyle: {
                    color: '#00D6F9',
                    fontSize: 20
                }

            }
        }
    },
    {
        name: '上学',
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 0,
        smooth: true,
        lineStyle: {
            normal: {
                width: 2,
                color: "rgba(25,163,223,1)", // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)',
        },
        itemStyle: {
            color: "rgba(25,163,223,1)",
            borderColor: "#646ace",
            borderWidth: 2

        },
        // tooltip: {
        //     show: true
        // },
        areaStyle: { //区域填充样式
            normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(25,163,223,.3)"


                    },
                    {
                        offset: 1,
                        color: "rgba(25,163,223, 0)"
                    }
                ], false),
                shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
                shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
        },
        data: yData
    },
    ]
         };
         myChart.setOption(option);
          window.addEventListener("resize", () => {
                myChart.resize();
            });
        }

        function cyyHandleClick() {
            store.commit("changeDescShow", false);
            layerManager.removeAll();
            options.forEach((item, index) => {
                if (item.name == state1.value) {
                    layerManager.fly(
                        item.points[0],
                        item.points[1],
                        5000,
                        6.242337420973824,
                        -1.543879601177395,
                        0
                    );
                    layerManager.addBillboard(
                        "cyyBillboard",
                        item.points[0],
                        item.points[1],
                        "/data/images/earth/local1.png"
                    );
                    layerManager.addOnlyLabelWithColor(
                        "cyy" + index,
                        item.points,
                        3,
                        item.name + "\n(" + item.address + ")",
                        "leftClick",
                        lLeftClick
                    );
                    // layerManager.
                }
            });
        }
        function lLeftClick() {}
        onMounted(() => {
            // drawChart();
            initEcharts()
        });
        onBeforeUnmount(() => {
            echarts.dispose(myChart);
        });
        return {
            title,
            state1,
            options,
            cyyNum,
            cyyHandleClick,
        };
    },
};
</script>
<style lang="stylus">
/* 031D2B */
.gardensInfo .el-select__popper.el-popper[role="tooltip"] {
    background: transparent;
}
.gardensInfo input::-webkit-input-placeholder {
    color: #c0c4cc !important;
  }
.gardensInfo input::-moz-input-placeholder {
   color: #c0c4cc !important;
  }
.gardensInfo input::-ms-input-placeholder {
   color: #c0c4cc !important;
  }
.gardensInfo .el-select-dropdown__item.hover,
.gardensInfo .el-select-dropdown__item:hover {
    background: #06c8ff;
    /* color: #08434c; */
}
.gardensInfo .inputRight1 .el-input__inner {
    background: #03587e;
    border: 1px solid #1398cf;
    color: #fff;
    width:180px;
}
.gardensInfo .el-input__inner {
    height: 30px !important;
}
.gardensInfo .inputRight1 .el-input__inner::-webkit-input-placeholder {
    /* color: #fff; */
    color: pink;
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .gardensInfo {
        display: flex;
        justify-content: space-between;

        .gardens {
            margin-top: vh(11);
            margin-bottom: vh(10);
            margin-left: vw(15);
            text-align: left;

            span:nth-child(1) {
                font-size: vw(12);
            }

            span:nth-child(2) {
                font-size: vw(15);
                color: #FFBD39;
            }
        }
    }

    #gardenChart {
        width: vw(364);
        height: vh(190);
    }
}
</style> 
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .rightFour{
        position: absolute;
        bottom: vh(10);
        right: 0;
    }
    .gardensInfo {
        display: flex;
        justify-content: space-between;
        .gardens {
            margin-top: vh(11);
            margin-bottom: vh(10);
            margin-left: vw1(15);
            text-align: left;
            span:nth-child(1) {
                font-size: vw1(12);
            }

            span:nth-child(2) {
                font-size: vw1(15);
                color: #FFBD39;
            }
        }
        .inputRight1{
            right: vw1(20);
            
        }
    }

    #gardenChart {
        width: vw1(900);
        height: vh(300);
    }
}
</style> 